import { ACCESSTOKEN, setWithExpiry } from '@/utils/authorize';
import { postRequestInit, urlPrefix } from '@/utils/http';
import { history } from 'alita';
import { Button, Form, Input, Space, Toast } from 'antd-mobile';
import {
  EyeInvisibleOutline,
  EyeOutline,
  LockOutline,
  UserOutline,
} from 'antd-mobile-icons';
import React, { useState } from 'react';
import style from './index.less';

interface LoginForm {
  username: string;
  password: string;
}

const Login: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);

  const onFinish = async (values: LoginForm) => {
    fetch(
      `${urlPrefix}/api/rayplatform/wei-xin-user/login-by-password`,
      postRequestInit({
        username: values.username,
        password: values.password,
      }),
    ).then(async (rsp: Response) => {
      if (rsp.ok) {
        await rsp
          .json()
          .then(({ accessToken, tokenType }) => {
            setWithExpiry(ACCESSTOKEN, accessToken, 30 * 24 * 60 * 60 * 1000);
            Toast.show({
              content: '登录成功',
            });
            setTimeout(() => {
              history.push('/');
            }, 1000);
          })
          .catch((reason) => {});
      }
    });
  };

  return (
    <div className={style.loginContainer}>
      <div className={style.loginContent}>
        <div className={style.loginHeader}>
          <div className={style.loginLogo}>
            <div className={style.logoCircle}>
              <div className={style.logoIcon}>ECG</div>
            </div>
          </div>
          <h1 className={style.loginTitle}>心电图管理系统</h1>
          <p className={style.loginSubtitle}>欢迎回来，请登录您的账户</p>
        </div>

        <div className={style.loginForm}>
          <Form
            form={form}
            onFinish={onFinish}
            layout="vertical"
            requiredMarkStyle="none"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <div className={style.loginInputWrapper}>
                <UserOutline className={style.loginInputPrefix} />
                <Input
                  placeholder="请输入用户名"
                  className={style.loginInput}
                  clearable
                />
              </div>
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <div className={style.loginInputWrapper}>
                <LockOutline className={style.loginInputPrefix} />
                <Input
                  placeholder="请输入密码"
                  type={visible ? 'text' : 'password'}
                  className={style.loginInput}
                  clearable
                />
                <div
                  className={style.loginInputSuffix}
                  onClick={() => setVisible(!visible)}
                >
                  {visible ? <EyeOutline /> : <EyeInvisibleOutline />}
                </div>
              </div>
            </Form.Item>

            <Space direction="vertical" style={{ width: '100%' }} size={16}>
              <Button
                type="submit"
                color="primary"
                size="large"
                loading={loading}
                className={style.loginButton}
                block
              >
                登录
              </Button>
            </Space>
          </Form>
        </div>

        <div className={style.loginFooter}>
          <p>© 2025 心电图管理系统. All rights reserved.</p>
        </div>
      </div>
    </div>
  );
};

export default Login;
